<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="{$oss}/active/newyear/js/rem.js"></script>
<!--    <script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>-->
    <title>生日权益</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        overflow-x: hidden;
        width: 100%;
    }

    .content {
        width: 89.333333%;
        margin: 0.5rem auto 0.5rem;
        font-size: 0;
        position: relative;
        box-shadow: 0 0.02rem 0.3rem 0 rgba(0, 0, 0, 0.13);
        border-radius: 0.2rem;
    }

    .astro-img {
        width: 100%;
    }

    .birth_bottom {
        width: 89.333333%;
        height: auto;
        margin: 0.1rem auto 0.5rem;
        background: url("{$oss}/web/static/birthday/birth_bottom.png") no-repeat center top;
        background-size: 100% auto;
        overflow: auto;
        overflow-x: hidden;
        border-radius: 0.2rem;
    }

    .equity {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 1.2rem 0.4rem 0.5rem;
    }

    .small_equity {
        width: 100%;
        height: 1.6rem;
        margin-bottom: 0.3rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0.02rem 0.2rem 0rem rgba(0, 0, 0, 0.07);
        border-radius: 0.08rem;
    }

    .small_equity:last-child {
        margin-bottom: 0;
    }

    .title {
        width: 1.6rem;
        height: 0.45rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 0.45rem;
        position: relative;
        top: 0.4rem;
        left: 0.34rem;
    }

    .des {
        width: 3.9rem;
        height: 0.37rem;
        font-size: 0.26rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 0.37rem;
        position: relative;
        top: 0.45rem;
        left: 0.34rem;
    }

    .coupon {
        width: 1.15rem;
        height: 1.2rem;
        position: relative;
        top: -0.6rem;
        left: 4.5rem;
    }

    .music-box img {
        animation: music_run 3s linear infinite;
    }

    @-webkit-keyframes music_run {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    .music_logo {
        width: 0.5rem;
        height: 0.5rem;
        position: fixed;
        top: 0.3rem;
        right: 0.3rem;
        z-index: 999999999;
    }

    .message-box {
        width: 100%;
        position: fixed;
        bottom: 3.72rem;
        text-align: center;
        display: none;
        z-index: 1000;
    }

    .message {
        display: inline-block;
        font-size: 0.28rem;
        padding: 0.14rem 0.26rem;
        border-radius: 0.18rem;
        background-color: #6F6F6F;
        color: white;
    }

    .bottom {
        width: 100%;
        height: 1rem;
        position: fixed;
        z-index: 100000000;
        bottom: 0;
        left: 0;
        color: #fff;
    }

    .shadow {
        width: 100%;
        height: 1rem;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .bo-left {
        width: 0.44rem;
        height: 0.44rem;
        line-height: 0.44rem;
        font-size: 0.3rem;
        display: block;
        float: left;
        position: relative;
        z-index: 2;
        text-align: center;
        border: 0.01rem solid #fff;
        border-radius: 50%;
        margin: 0.24rem 0.28rem 0.24rem 0.19rem;
    }

    .bo-logo {
        padding: 0.15rem 0;
        float: left;
        position: relative;
        z-index: 2;
    }

    .bo-logo img {
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 0.05rem;
    }

    .bo-des {
        width: 5.8rem;
        height: 1rem;
        line-height: 1rem;
        float: left;
        position: relative;
        z-index: 2;
        padding-left: 0.28rem;
        box-sizing: border-box;
        font-size: 0.30rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .bo-btn {
        float: right;
        height: 1rem;
        position: absolute;
        right: 0;
        z-index: 20;
        background: rgba(255, 108, 137, 1);
    }

    .bo-btn a {
        display: block;
        width: 1.7rem;
        height: 1rem;
        text-align: center;
        color: #fff;
        text-decoration: none;
        line-height: 1rem;
        font-size: 0.30rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        outline: none;
    }

    a {
        text-decoration: none;
    }

    a:link {
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none;
    }

    a:active {
        text-decoration: none;
    }

    .it-box {
        width: 100%;
    }
</style>
<body>
<div class="music-box">
    <img class="music_logo" src="{$oss}/web/static/birthday/musicing.png" onclick="musicplay(this,'{$oss}')">
    <audio id="bg_music" src="{$oss}web/static/birthday/birth.mp3" loop="loop"></audio>
</div>
<div class="content">
    <img class="astro-img" src="{$oss}/web/static/birthday/sms_birth.png?v=12" alt="">
</div>
<div class="birth_bottom">
    <div class="equity">
        <a class="it-box" href="https://applink-zhunle.goddessxzns.com?app=zhunle&target=local&link=empty" data-jmlink="true" data-auto="false" data-params="{k: 1}">
            {foreach name='coupon' item='cp'}
            <div class="small_equity">
                <p class="title">{$cp['name']}</p>
                <p class="des">{$cp['des']}</p>
                <img class="coupon" src="{$oss}{$cp['img']}" alt="">
            </div>
            {/foreach}
        </a>
    </div>
</div>
<br>
<br>
<div class="message-box">
    <div class="message"></div>
</div>
<div class="bottom" id="bottom">
    <div class="shadow"></div>
    <div class="bo-left" id="close">x</div>
    <div class="bo-logo">
        <img src="{$oss}/uploads/20180329/33503860a02a86f4c23d59ac75ec5b59.jpg" alt="">
    </div>
    <div class="bo-des">启动APP体验更多惊喜</div>
    <div class="bo-btn">
        <a href="https://applink-zhunle.goddessxzns.com?app=zhunle&target=local&link=empty" data-jmlink="true" data-auto="false" data-params="{a: 1}">打开APP</a>
    </div>
</div>
</body>
<script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script src="/static/vip/js/common_func.js?v=1"></script>
<script type="text/javascript">

    document.addEventListener("visibilitychange", function () {
        var string = document.visibilityState
        if (string === 'hidden') {  // 当页面由前端运行在后端时，出发此代码
            audio.pause();
        }
        if (string === 'visible') {   // 当页面由隐藏至显示时
            audio.play();
        }
    });

    var audio = $('#bg_music')[0];
    audio.play();

    /**
     * 音乐播放
     */
    function musicplay(obj, oss) {
        var status = audio.paused; // 是否暂停播放
        if (status) {
            audio.play();
            $(obj).css({animationPlayState: "running"}).attr('src', oss + "/web/static/birthday/musicing.png");
        } else {
            $(obj).css({animationPlayState: "paused"}).attr('src', oss + "/web/static/birthday/music_stop.png");
            audio.pause();
        }
    };

</script>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279034622&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</html>
